<template>
  <div class="test-container">
    <!--    四个方框-->
    <el-row :gutter="20" class="mb-24">
      <el-col :span="6">
        <div class="grid-content bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              销量平均数
            </span>
            <h2 class="mb-0">{{ averageTitle }}</h2>
          </div>
          <div>
            <svg t="1606535919729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="792" width="70" height="70"><path d="M690.71 388.77c-51.956 73.454-105.703 161.838-161.242 265.152 14.333 53.15 32.547 96.447 54.643 129.89 22.096 33.442 42.4 50.164 60.913 50.164 4.18 0 8.361-0.747 12.541-2.24 4.18-1.493 8.51-4.479 12.99-8.958 4.478-4.479 9.405-10.898 14.78-19.26 5.375-8.36 11.645-19.11 18.811-32.247l9.854 8.957c-10.152 41.207-20.603 70.618-31.353 88.235-10.749 17.618-25.977 26.426-45.685 26.426-26.873 0-50.462-19.707-70.767-59.122-9.555-19.11-19.11-40.46-28.665-64.049-9.555-23.589-19.409-50.313-29.561-80.173a3664.756 3664.756 0 0 1-36.727 66.289 8214.357 8214.357 0 0 0-36.728 65.392c-7.763 14.333-14.63 25.829-20.603 34.488-5.972 8.66-11.346 15.378-16.124 20.155-8.36 7.764-21.797 11.645-40.31 11.645-17.916 0-26.874-3.583-26.874-10.749 0-2.986 2.09-6.868 6.27-11.645 26.874-35.832 53.3-75.246 79.278-118.244 25.978-42.998 50.014-85.996 72.11-128.994-18.512-63.302-37.473-112.122-56.882-146.46-19.409-34.34-38.668-51.508-57.778-51.508a24.62 24.62 0 0 0-10.302 2.239c-3.284 1.493-6.867 4.628-10.75 9.406-3.88 4.777-8.36 11.346-13.436 19.707-5.076 8.36-11.197 19.11-18.364 32.248L310 475.661c7.764-26.277 14.482-47.029 20.155-62.257 5.674-15.229 11.198-26.575 16.572-34.04 5.375-7.465 11.198-12.392 17.468-14.78 6.27-2.39 14.482-3.584 24.634-3.584 13.139 0 25.082 5.375 35.832 16.124 5.375 6.57 11.496 15.826 18.363 27.77 6.868 11.943 13.885 26.276 21.051 42.997 7.167 17.319 14.482 36.877 21.947 58.674 7.465 21.798 15.08 46.432 22.843 73.903 21.499-38.818 39.564-71.066 54.195-96.745 14.631-25.68 25.828-45.387 33.592-59.122 8.36-13.736 15.228-24.933 20.603-33.592 5.375-8.66 9.555-13.885 12.541-15.676 7.166-5.972 19.409-8.958 36.727-8.958 19.11 0 28.665 3.583 28.665 10.75 0 3.582-1.492 7.464-4.478 11.644zM284 254.875h456c19.33 0 35-15.67 35-35s-15.67-35-35-35H284c-19.33 0-35 15.67-35 35s15.67 35 35 35z" fill="#40c9c6" p-id="793" /></svg>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              会员销售总计
            </span>
            <h2 class="mb-0">{{ allNumber }}</h2>
          </div>
          <div>
            <svg t="1606542737784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1741" width="70" height="70"><path d="M490.5 523.7c-5 0-10-2.4-13-6.9-4.8-7.2-2.8-16.8 4.3-21.6l107.4-71.6c7.1-4.8 16.8-2.8 21.6 4.3 4.8 7.2 2.8 16.8-4.3 21.6l-107.4 71.6c-2.7 1.8-5.7 2.6-8.6 2.6zM404.3 466.3c-5 0-10-2.4-13-6.9-4.8-7.2-2.8-16.8 4.3-21.6L557 330.2c7.1-4.8 16.8-2.9 21.6 4.3 4.8 7.2 2.8 16.8-4.3 21.6L412.9 463.7c-2.6 1.8-5.6 2.6-8.6 2.6zM318.2 408.9c-5 0-10-2.4-13-6.9-4.8-7.2-2.8-16.8 4.3-21.6l215.4-143.6c7.1-4.8 16.8-2.8 21.6 4.3s2.8 16.8-4.3 21.6L326.8 406.3c-2.7 1.7-5.7 2.6-8.6 2.6z" p-id="1742" fill="#36a3f7" /><path d="M852.2 357.4L533.6 144.9c-12.3-8.2-30.9-8.2-43.2 0L171.8 357.4c-7.8 5.2-12.3 13.1-12.3 21.6s4.5 16.4 12.3 21.6L490.4 613c6.2 4.1 13.9 6.1 21.6 6.1 7.7 0 15.5-2 21.6-6.1l318.6-212.4c7.8-5.2 12.3-13.1 12.3-21.6s-4.4-16.4-12.3-21.6zM516.4 587.1c-2 1.3-6.8 1.3-8.7 0L195.5 379l312.1-208.2c1.9-1.3 6.8-1.3 8.7 0l312.2 208.1-312.1 208.2zM835 383.3l8.6-13-8.6 13z" p-id="1743" fill="#36a3f7" /><path d="M512 752.2c-7.7 0-15.5-2-21.6-6.2L171.8 533.6c-7.2-4.8-9.1-14.4-4.3-21.6 4.8-7.2 14.4-9.1 21.6-4.3l318.6 212.4c2 1.3 6.7 1.3 8.7 0L835 507.8c7.1-4.8 16.8-2.8 21.6 4.3 4.8 7.2 2.8 16.8-4.3 21.6L533.6 746.1c-6.1 4.1-13.9 6.1-21.6 6.1z" p-id="1744" fill="#36a3f7" /><path d="M512 885.3c-7.7 0-15.5-2-21.6-6.2L171.8 666.7c-7.2-4.8-9.1-14.4-4.3-21.6s14.4-9.1 21.6-4.3l318.6 212.4c2 1.3 6.7 1.3 8.7 0L835 640.8c7.1-4.8 16.8-2.9 21.6 4.3s2.8 16.8-4.3 21.6L533.6 879.1c-6.1 4.1-13.9 6.2-21.6 6.2z" p-id="1745" fill="#36a3f7" /></svg>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              男第一个香烟与总共相比
            </span>
            <h2 class="mb-0">{{ boyProportion }}%</h2>
          </div>
          <div>
            <svg t="1606542781975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2639" width="70" height="70"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26c-54 0-106.4 10.6-155.7 31.4-47.6 20.1-90.4 49-127.1 85.7-36.7 36.7-65.6 79.5-85.7 127.1C82.6 445.6 72 498 72 552c0 54 10.6 106.4 31.4 155.7 20.1 47.6 49 90.4 85.7 127.1 36.7 36.7 79.5 65.6 127.1 85.7C365.6 941.4 418 952 472 952c54 0 106.4-10.6 155.7-31.4 47.6-20.1 90.4-49 127.1-85.7 36.7-36.7 65.6-79.5 85.7-127.1C861.4 658.4 872 606 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8c-62.6 62.1-147.1 96.6-235.3 96.2-88.1-0.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8z" p-id="2640" fill="#ffbe0b" /><path d="M952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6-65.8-65.7-152.8-106.5-245.2-115L560.7 72c-4.7-0.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6z m-332.2-58.2V147.6c62.6 13.1 120.7 44.2 166.4 89.8 45.7 45.6 77 103.6 90 166.1l-256.4 0.7z" p-id="2641" fill="#ffbe0b" /></svg>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              女香烟与总共相比
            </span>
            <h2 class="mb-0">{{ grilProportion }}%</h2>
          </div>
          <div>
            <svg t="1606542781975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2639" width="70" height="70"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26c-54 0-106.4 10.6-155.7 31.4-47.6 20.1-90.4 49-127.1 85.7-36.7 36.7-65.6 79.5-85.7 127.1C82.6 445.6 72 498 72 552c0 54 10.6 106.4 31.4 155.7 20.1 47.6 49 90.4 85.7 127.1 36.7 36.7 79.5 65.6 127.1 85.7C365.6 941.4 418 952 472 952c54 0 106.4-10.6 155.7-31.4 47.6-20.1 90.4-49 127.1-85.7 36.7-36.7 65.6-79.5 85.7-127.1C861.4 658.4 872 606 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8c-62.6 62.1-147.1 96.6-235.3 96.2-88.1-0.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8z" p-id="2640" fill="#f4516c" /><path d="M952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6-65.8-65.7-152.8-106.5-245.2-115L560.7 72c-4.7-0.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6z m-332.2-58.2V147.6c62.6 13.1 120.7 44.2 166.4 89.8 45.7 45.6 77 103.6 90 166.1l-256.4 0.7z" p-id="2641" fill="#f4516c" /></svg>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    时间折线-->
    <el-row :gutter="20" class="mb-24">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="float-right bt-export" @click="drawer = true">
            <i class="el-icon-search" />
            Find</el-button>
          <!--          抽屉-->
          <el-drawer
            :visible.sync="drawer"
            direction="rtl"
          >
            <ul class="nav-ul">
              <li>
                <h5 class="tc-menu-title mt-0 mb-24">指定店铺数据分析</h5>
                <el-select
                  v-model="shopname"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shopName"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select></li>
              <li>
                <h5 class="tc-menu-title mt-0 mb-24">指定时间段内销售额趋势</h5>
                <el-date-picker
                  v-model="timeBefore"
                  type="datetime"
                  placeholder="开始时间"
                />
                <hr>
                <el-date-picker
                  v-model="timeAfter"
                  type="datetime"
                  placeholder="结束时间"
                />
              </li>
              <li>
                <h5 class="tc-menu-title mt-0 mb-24">
                  指定店铺内年龄相关销售量分析
                </h5>
                从
                <el-input v-model="ageBefore" placeholder="开始年龄" style="width: 100px" />
                到
                <el-input v-model="ageAfter" placeholder="结束年龄" style="width: 100px" />
                岁
              </li>
              <li>
                <el-button type="primary" style="width: 150px" @click="select">
                  查询</el-button>
              </li>
            </ul>
          </el-drawer>
          <h5 class="tc-menu-title mt-0 p-3">男女比例</h5>
          <div class="card-body">
            <ve-ring :data="boyGirlPie" :extend="pieExtend" />
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <ul class="tc-menu-title float-right nav-ul pr-3">
            <li @click="cxVipTime(1)">Y</li>
            <li @click="cxVipTime(2)">M</li>
            <li @click="cxVipTime(3)">D</li>
            <li @click="cxVipTime(4)">H</li>
            <li @click="cxVipTime(5)">M</li>
            <li @click="cxVipTime(6)">S</li>
          </ul>
          <h5 class="tc-menu-title mt-0 p-3">时间</h5>
          <div class="card-body">
            <ve-Line :data="lineList" :extend="lineExtend" />
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    表格-->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="float-right bt-export" @click="exportExcel('男')">
            <i class="el-icon-tickets" />
            Export</el-button>
          <h5 class="tc-menu-title mt-0 p-3">男性香烟销量排行</h5>
          <div class="card-body">
            <el-table
              :data="boyList"
              height="500"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="名称"
              />
              <el-table-column
                prop="number"
                label="数量"
              />
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-button type="primary" class="float-right bt-export" @click="exportExcel('女')">
            <i class="el-icon-tickets" />
            Export</el-button>
          <h5 class="tc-menu-title mt-0 p-3">女性香烟销量排行</h5>
          <div class="card-body">
            <el-table
              :data="girlList"
              height="500"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="名称"
              />
              <el-table-column
                prop="number"
                label="数量"
              />
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data: function() {
    this.pieExtend = {
      series: {
        radius: ['50%', '70%'],
        label: {
          show: true,
          color: 'rgba(255, 255, 255, 1)',
          position: 'inside',
          fontWeight: 400
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          borderWidth: 3,
          borderColor: '#FFF'
        }
      }
    }
    this.lineExtend = {
      series: {
        symbol: 'none',
        lineStyle: {
          color: '#43D39E'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(217, 246, 236, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(217, 246, 236, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      dataZoom: [{
        start: 0,
        end: 100,
        type: 'inside',
        show: true
      },
      {
        type: 'inside',
        show: true
      }],
      xAxis: [{
        axisLine: {
          show: false
        },
        data: {
          textStyle: {
            color: 'red'
          }
        }
      }],
      yAxis: [{
        axisLine: {
          show: false
        }
      }]
    }
    return {
      loading: {
      },
      drawer: false,
      shopName: [],
      shopname: '',
      ageBefore: '',
      ageAfter: '',
      timeAfter: '',
      timeBefore: '',
      boyList: [],
      girlList: [],
      boyGirlPie: {
        columns: ['性别', '数量'],
        rows: []
      },
      averageTitle: 0.0,
      allNumber: 0.0,
      boyProportion: 0.0,
      grilProportion: 0.0,
      lineList: {
        columns: ['name', 'number'],
        rows: []
      }
    }
  },
  created() {
    this.selectshopName()
  },
  methods: {
    time_String(date) {
      var year = date.getFullYear()
      var month = (date.getMonth() + 1).toString()
      var day = (date.getDate()).toString()
      if (month.length === 1) {
        month = '0' + month
      }
      if (day.length === 1) {
        day = '0' + day
      }
      var hours = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      // eslint-disable-next-line no-unused-vars
      return year + month + day + hours + m + s
    },
    defult_loading() {
      this.boyGirlPie = {
        columns: ['性别', '数量'],
        rows: []
      }
      this.allNumber = 0
    },
    selectshopName: function() {
      this.$axios.post(`first/shop/name`)
        .then(res => {
          // eslint-disable-next-line no-unused-vars
          var ListShop = []
          for (var i = 0; i < res.data.length; i++) { ListShop.push({ 'value': res.data[i], 'label': res.data[i] }) }
          this.shopName = ListShop
        })
    },
    select: function() {
      this.defult_loading()
      var boyAllNumber = 0
      var grilAllNumber = 0
      var data = new URLSearchParams()
      // eslint-disable-next-line camelcase,no-unused-vars
      var data_1 = new URLSearchParams()
      // eslint-disable-next-line no-undef,camelcase
      data.append('sex', '男')
      data.append('shop_name', this.shopname)
      data.append('age_before', this.ageBefore)
      data.append('age_after', this.ageAfter)
      data.append('time_after', this.time_String(this.timeAfter))
      data.append('time_before', this.time_String(this.timeBefore))
      data_1.append('sex', '女')
      data_1.append('shop_name', this.shopname)
      data_1.append('age_before', this.ageBefore)
      data_1.append('age_after', this.ageAfter)
      data_1.append('time_after', this.time_String(this.timeAfter))
      data_1.append('time_before', this.time_String(this.timeBefore))
      this.$axios.post(`first/imgtable/sex`, data, { timeout: 30000000 })
        .then(res => {
          this.boyList = res.data
          var i
          for (i = 0; i < res.data.length; i++) {
            boyAllNumber = boyAllNumber + parseInt(res.data[i].number)
          }
          this.allNumber += boyAllNumber
          this.boyGirlPie.rows.push({ '性别': '男', '数量': boyAllNumber })
          this.boyProportion = (parseInt(res.data[0].number) / boyAllNumber * 100).toFixed(2)
          this.$axios.post(`first/imgtable/sex`, data_1, { timeout: 30000 })
            .then(res => {
              this.girlList = res.data
              if (res.data.length == 0) {
                this.grilProportion = 0
                this.averageTitle = (this.allNumber / this.boyList.length).toFixed(2)
                return
              }
              var i
              for (i = 0; i < res.data.length; i++) {
                grilAllNumber = grilAllNumber + parseInt(res.data[i].number)
              }
              this.allNumber += grilAllNumber
              this.boyGirlPie.rows.push({ '性别': '女', '数量': grilAllNumber })
              this.grilProportion = (parseInt(res.data[0].number) / grilAllNumber * 100).toFixed(2)
              this.averageTitle = (this.allNumber / this.boyList.length).toFixed(2)
            })
        })
      this.cxVipTime(1)
    },
    exportExcel: function(i) {
      require.ensure([], () => {
        // eslint-disable-next-line camelcase
        const { export_json_to_excel } = require('@/vendor/Export2Excel.js')// 注意这个Export2Excel路径
        const tHeader = ['品种', '数量'] // 上面设置Excel的表格第一行的标题
        const filterVal = ['name', 'number'] // 上面的index、nickName、name是tableData里对象的属性key值
        if (i === '男') {
          var list = this.boyList // 把要导出的数据tableData存到list
          var data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '男烟类分析')// 最后一个是表名字
        }
        if (i === '女') {
          var listGirl = this.girlList // 把要导出的数据tableData存到list
          var dataGirl = this.formatJson(filterVal, listGirl)
          export_json_to_excel(tHeader, dataGirl, '女烟类分析')// 最后一个是表名字
        }
      })
    },
    cxVipTime(i) {
      // eslint-disable-next-line camelcase
      var data_2 = new URLSearchParams()
      data_2.append('sex', i)
      data_2.append('shop_name', this.shopname)
      data_2.append('age_before', this.ageBefore)
      data_2.append('age_after', this.ageAfter)
      data_2.append('time_after', this.time_String(this.timeAfter))
      data_2.append('time_before', this.time_String(this.timeBefore))
      this.$axios.post(`first/imgtable/cxVipTime`, data_2)
        .then(res => {
          this.lineList.rows = res.data
        })
      this.drawer = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style scoped>
.test-container{
  background-color: rgb(240, 242, 245);
  padding: 20px;
  font-size: .875rem;
  font-weight: 400;
}
.test-container h1,h2,h3,h4,h5,h6,h7{
  color: #4b4b5a;
  margin: 10px 0px 0px;
  font-weight: 600;
  font-family: "Nunito Sans",sans-serif;
  display: block;
}
.test-container-menu-span{
  font-size: 12px;
  color: #6c757d;
  font-weight: 700;
}

.test-container h2{
  font-size: 1.75rem;
}

 .flex-1{
   -webkit-box-flex: 1;
   flex: 1;
 }
 .test-container .grid-content{
   background-color: white;
   border-radius: 6px 6px 6px 6px;
   -moz-border-radius: 6px 6px 6px 6px;
   -webkit-border-radius: 6px 6px 6px 6px;
   -webkit-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
   -moz-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
   box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
  }
  .mb-24{
    margin-bottom: 24px;
  }
  .mb-0{
    margin-bottom: 0;
  }
  .display-flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .tc-menu-title{
    font-size: 1.04rem;
  }
  .mt-0{
    margin-top: 0px;
  }
  .p-3{
    padding: 1rem;
  }
  .pr-3{
    padding-right: 1rem;
  }
.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}
  .float-right{
    float: right;
  }
  .bt-export{
    margin: 12px;
    padding: 8px 12px;
    background-color: #5369f8;
    font-size: .76562rem;
  }
  .nav-ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }
.nav-ul li{
  color: #6c757d;
  padding: .5rem 1rem;
}
.el-table{
  font-size: 12px !important;
}

</style>
